<template>
  <div>
    <el-table :data="data.tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <!--多选-->
      <el-table-column
        v-if="data.tableConfig.selection"
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <!--column-->
      <template v-for="item in data.tableConfig.tHead">
        <!--v-slot-->
        <el-table-column
          v-if="item.columnType === 'slot'"
          :key="item.field"
          :prop="item.field"
          :label="item.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName || 'default'" :row="scope.row"></slot>
          </template>
        </el-table-column>
        <!--普通列,直接显示数据的列-->
        <el-table-column
          v-else
          :key="item.field"
          :prop="item.field"
          :label="item.label"
          :width="item.width"
        ></el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="data.tableConfig.pagination.show"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageData.currentPage"
      :page-sizes="pageData.pageSizes"
      :page-size="pageData.pageSize"
      :layout="data.tableConfig.pagination.layout"
      :total="pageData.total"
      background
    ></el-pagination>
  </div>
</template>

<script>
import { reactive, onBeforeMount, watch } from "@vue/composition-api";
import loadData from "./loadTableData";
import paginationHook from "./paginationHook";
import recordPage from "./recordPage";
export default {
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    tableRow: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { root, emit}) {
    console.log("props.config:", props.config);

    // 加载数据
    const { tableData, tableLoadData } = loadData({ root });

    // 翻页记录
    const { aa } = recordPage({ root });

    // 页码
    const { pageData, handleSizeChange, handleCurrentChange, totalCount } = paginationHook();

    const data = reactive({
      // 默认配置↓
      tableConfig: {
        selection: true,
        recordCheckbox: true,
        tHead: [],
        requestParam: {},
        pagination: {
          show: true,
          layout: "total, sizes, prev, pager, next, jumper"
        }
      },
      tableData: [
        {
          email: "2011-01-01",
          name: "张三",
          phone: "上海市普陀区金沙江路 1518 弄",
          address: "广东",
          role: "超管",
          status: true
        },
        {
          email: "2011-01-01",
          name: "ahhh2",
          phone: "上海市普陀区金沙江路 1518 弄",
          address: "广东",
          role: "超管"
        }
      ]
    });

    // 勾选checkbox时触发
    const handleSelectionChange = (val) => {
      const rowData = {
        idItem: val.map(item => item.id)
      };
      emit("update:tableRow", rowData);
    };

    watch([() => tableData.item, () => tableData.total], ([curItem, curTotal]) => {
      data.tableData = curItem;
      totalCount(curTotal);
    });

    watch([() => pageData.currentPage, () => pageData.pageSize], ([currentPage, pageSize]) => {
      let requestData = data.tableConfig.requestParam;
      if (requestData.data) {
        requestData.data.pageNumber = currentPage;
        requestData.data.pageSize = pageSize;
        tableLoadData(data.tableConfig.requestParam);
      }
    });

    /** 初始化table配置*/
    /*const initTableConfig = () => {
      const config = props.config;
      for (const key in config) {
        data.tableConfig[key] = config[key];
      }
    };*/
    data.tableConfig = { ...data.tableConfig, ...props.config };

    /** 初始化table数据*/
    // const loadData = () => {
    //   const requestParams = data.tableConfig.requestParam;
    //   const requestData = {
    //     url: requestUrl[requestParams.url],
    //     method: requestParams.method,
    //     data: requestParams.data
    //   };
    //
    //   loadTableData(requestData).then(res => {
    //     if (res && res.length > 0) {
    //       data.tableData = res;
    //     }
    //   });
    // };

    onBeforeMount(() => {
      // initTableConfig()
      tableLoadData(data.tableConfig.requestParam);
    });

    return {
      data,
      pageData,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange
    };
  }
};
</script>

<style lang="scss" scoped></style>
